<template>
	<view class="">
	
		<u-popup v-model="show" mode="center" border-radius="14" closeable :title-style="{ color: 'red' }">
			<view class="slot-content padding ">
				<view class="flex  justify-center align-center "><text class="f32 block text-center " style="color: #333333;">添加分校</text></view>
				<view class="ss ">
					<input
						type="text "
						class="padding-left"
						style="display: flex; align-items: center;  height: 100%; "
						placeholder-style="color:'#999999'"
						v-model="value"
						placeholder="请填写用户邀请码"
					/>
				</view>
				<view class="ss ">
					<input
						type="text"
						class="padding-left"
						style="display: flex; align-items: center;  height: 100%;"
						placeholder-style="color:'#999999'"
						v-model="identity_remark"
						placeholder="请填写用户备注"
					/>
				</view>
				<view class="btn" @click="confirm1">确认添加</view>
			</view>
		</u-popup>

		<u-popup v-model="show1" mode="center" border-radius="14" closeable :title-style="{ color: 'red' }">
			<view class="slot-content padding ">
				<view class="flex  justify-center align-center "><text class="f32 block text-center " style="color: #333333;">添加销售</text></view>
				<view class="ss ">
					<input
						type="text"
						class="padding-left"
						style="display: flex; align-items: center;  height: 100%;"
						placeholder-style="color:'#999999'"
						v-model="value1"
						placeholder="请填写用户邀请码"
					/>
				</view>

				<view class="btn" @click="confirm2">确认添加</view>
			</view>
		</u-popup>

		<u-popup v-model="show2" mode="center" border-radius="14" closeable :title-style="{ color: 'red' }">
			<view class="slot-content padding ">
				<view class="flex  justify-center align-center "><text class="f32 block text-center " style="color: #333333;">添加备注</text></view>
				<view class="ss">
					<input
						type="text"
						class="padding-left"
						style="display: flex; align-items: center;  height: 100%;"
						placeholder-style="color:'#999999'"
						v-model="remarks"
						placeholder="请填写用户备注"
					/>
				</view>

				<view class="btn" @click="edtNotes">确认添加</view>
			</view>
		</u-popup>

		<block v-if="data">
			<view style="width: 100%; height: 100vh; display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<!-- 卡片 -->
				<view class="card">
					<view
						style="width: 702rpx;height: 180rpx; background-color: #FFFFFF;display: flex;justify-content: space-around;align-items: center;
					box-shadow:0 1px 11px #B4D4FF; border-radius: 10rpx;"
					>
						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<text style="font-size: 36rpx;color: #3187FB;">{{ data.branch }}人</text>
							<text style="font-size: 28rpx;color: #999999;">分校</text>
						</view>
						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<text style="font-size: 36rpx;color: #3187FB;">{{ data.user_num }}</text>
							<text style="font-size: 28rpx;color: #999999;">平台用户</text>
						</view>
						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<text style="font-size: 36rpx;color: #3187FB;">{{ data.sign_up }}</text>
							<text style="font-size: 28rpx;color: #999999;">报名人数</text>
						</view>
					</view>
				</view>

				<!-- 用户列表 -->
				<scroll-view
					:enable-flex="true"
					:show-scrollbar="false"
					@scrolltolower="lower"
					:scroll-y="true"
					style="width: 702rpx;height: 170rpx; display: flex;flex-direction: column; align-items: center;flex: auto;flex-basis: 50vh;
				"
				>
					<!-- item -->
					<view
						class="b"
						style="height: 220rpx; margin-top: 15rpx; display: flex;flex-direction: column;justify-content: center;align-items: center;
						padding-left: 24rpx;padding-right: 24rpx; "
						v-for="(item, index) in list"
						:key="index"
					>
						<view style="height: 220rpx;display: flex;flex-direction: column;justify-content: center;" @click="jump_p(item)">
							<!-- 姓名 -->
							<view style="width: 654rpx;text-align: start;font-size: 32rpx;color: #333333;">{{ item.user_nickname }}</view>
							<view
								style="font-size: 28rpx;color: #3187FB; margin-top: 10rpx; display: flex; align-items: center; display: none;"
								@click.stop="clkOnTheNote(item.id)"
							>
								<text style="width: 180rpx;" class="hidden block">{{ item.identity_remark ? item.identity_remark : '暂无备注' }}</text>
								<text class="cuIcon-write  " style="color:#333333 ;"></text>
							</view>
							<!-- 数据情况 -->
							<view style="width: 654rpx;margin-top: 39rpx; display: flex; flex-direction: column;">
								<view style=" display: flex; justify-content: space-between;">
									<view style="font-size: 26rpx;color: #666666;">用户数量</view>
									<view style="font-size: 26rpx;color: #666666; margin: 5rpx;">{{ item.user_number }} 人</view>
								</view>
								<view style="display: flex; justify-content: space-between;">
									<view style="font-size: 26rpx;color: #666666;">报名人数</view>
									<view style="font-size: 26rpx;color: #666666;margin: 5rpx;">{{ item.user_apply }} 人</view>
								</view>
							</view>
							<!-- <view style="width: 702rpx;height: 10rpx;background-color: #F7F8FF;margin-top: 29rpx;"></view> -->
						</view>
					</view>
				</scroll-view>
			</view>
		</block>

		<xw-empty :isShow="emptyShow" text="暂无相关数据" textColor="#777777"></xw-empty>
	</view>
</template>

<script>
import xwEmpty from '@/components/xw-empty/xw-empty';
export default {
	components: { xwEmpty },
	data() {
		return {
			emptyShow: false,
			identity_remark: '',
			value: '',
			value1: '',
			show: false,
			show1: false,
			show2: false,
			page: 1,
			pagesize: 10,
			limit: 10,
			data: {},
			list: [],
			remarks: '', //备注
			branchSchoolId: '',
		};
	},
	onLoad() {
		const item = this.$Route.query.item;
		uni.setNavigationBarTitle({
			title: item.user_nickname,
		});
		
		this.id = item.id
		this.getData(item.id);
	},
	methods: {
		clkOnTheNote(id) {
			this.show2 = true;
			this.branchSchoolId = id;
		},
		async edtNotes() {
			if (!this.remarks) return uni.$showMsg('请填写用户备注');
			let obj = {
				uid: this.branchSchoolId,
				identity_remark: this.remarks,
			};
			const res = await this.$request.post('api/User/edit_sfremark', { data: obj });
			if (!res.data.code) return uni.$showMsg();
			uni.$showMsg(res.data.msg);
			this.show2 = false;
			this.remarks = '';
			this.list = [];
			this.page = 1;
			this.getData(this.id);
		},
		showM(e) {
			if (e == 1) {
				this.show = true;
				this.show1 = false;
			} else {
				this.show = false;
				this.show1 = true;
			}
		},

		// jump_p(item) {
		// 	console.log('item :>> ', item);
		// 	uni.setStorageSync('ddddd', item.id)
		// 	this.$Router.push({
		// 		name: 'zongbux',
		// 		params: {
		// 			item: item,
		// 		},
		// 	});
		// },
		// 滑动到页面底部触发
		lower() {
			console.log('滑动到页面底部触发');
			this.getData(this.id);
		},
		async confirm1() {
			if (!this.value) return uni.$showMsg('请填写邀请码');
			let res;
			try {
				res = await this.$request.post('api/User/set_identity', {
					data: {
						uid: uni.getStorageSync('id'),
						invite: this.value,
						identity_remark: this.identity_remark,
					},
				});
				uni.$showMsg(res.data.msg);
				this.value = '';

				this.page = 1;
				this.show = false;
				this.getData(this.id);
			} catch (e) {
				//TODO handle the exception
				// return uni.showToast({
				// 	title: '网络连接失败！',
				// 	icon: 'none',
				// });
			}
		},
		async confirm2() {
			if (!this.value1) return uni.$showMsg('请填写邀请码');
			let res;
			try {
				res = await this.$request.post('api/User/set_person', {
					data: {
						uid: uni.getStorageSync('id'),
						invite: this.value1,
						identity: 2,
					},
				});
				uni.$showMsg(res.data.msg);
				this.page = 1;
				this.show1 = false;
				this.value1 = '';

				this.getData(this.id);
			} catch (e) {
				//TODO handle the exception
				// return uni.showToast({
				// 	title: '网络连接失败！',
				// 	icon: 'none',
				// });
			}
		},

		async getData(id) {
			let res;
			try {
				res = await this.$request.post('api/User/headquarters_tschool', {
					data: {
						uid:id,
						page: this.page,
						limit: this.limit,
					},
				});
				// console.log(res);
				if (res.data.code == 1) {
					this.data = res.data.data;
					this.list = [...this.list, ...res.data.data.list];
					console.log('滑动到页面底部触发111111111111', this.list);

					this.page += 1;
					!res.data.data && (this.emptyShow = true);
				}
			} catch (e) {
				//TODO handle the exception
				// return uni.showToast({
				// 	title: '网络连接失败！',
				// 	icon: 'none',
				// });
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.indd {
	display: block;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20rpx 0;
	/* padding-left: 20rpx; */
}
.fixed {
	position: fixed;
	bottom: 150rpx;
	right: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200rpx;
	height: 70rpx;
	background: #3187fb;
	opacity: 0.9;
	border-radius: 35rpx;
	z-index: 99999;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
.slot-content {
	width: 600rpx;
	height: 400rpx;
	background: #ffffff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	.ss {
		width: 500rpx;
		height: 80rpx;
		border: 2rpx solid #f0f0f0;
		border-radius: 6rpx;
		margin: 0 auto;
	}
	.btn {
		display: flex;

		align-items: center;
		justify-content: center;
		width: 360rpx;
		height: 90rpx;
		background: #3187fb;
		border-radius: 20rpx;

		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 33px;
	}
}

.card {
	width: 100%;
	height: 236rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3187fb+50,ffffff+50 */
	background: rgb(49, 135, 251);
	/* Old browsers */
	background: -moz-linear-gradient(top, rgb(49, 135, 251) 50%, rgb(255, 255, 255) 50%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(49, 135, 251) 50%, rgb(255, 255, 255) 50%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(49, 135, 251) 50%, rgb(255, 255, 255) 50%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3187fb', endColorstr='#ffffff', GradientType=0);
	/* IE6-9 */
}
</style>
